<template>
	<view class="mine-info">
		<view class="top-nav">
			<view @click="backBtn">返回</view>
			<view>志愿者信息</view>
			<view></view>
		</view>
		<view class="main">
			<view class="main-item">
				<text>姓名: </text>
				<input  type="text" value="" maxlength="10" v-model="username" @input="onKeyYHKNameInput" />
			</view>
			<view class="main-item">
				<text>分组:</text>
				<!-- <radio-group class="radio" @change="cityChange">
					<label class="" v-for="(item, index) in cityList" :key="index" >
						<view>
							<radio :value="item.id" :checked="item.id == groupId"/>
						</view>
						<view>{{item.groupName}}</view>
					</label>
				</radio-group> -->
				<select @change="cityChange" ref="addRequestState" class="select" style="width: 76%;" id="addRequestState">
					<option v-for="(item,index) in cityList" :key="index" :value="item.id" >{{item.groupName}}
					</option>
				</select>
			</view>
			<view class="main-item">
				<text>性别:</text>
				<radio-group class="radio" @change="radioChange">
					<label class="">
						<view>
							<radio value="1" :checked="sex == 1" />
						</view>
						<view>男</view>
					</label>
					<label class="">
						<view>
							<radio value="2" :checked="sex == 2" />
						</view>
						<view>女</view>
					</label>
				</radio-group>
			</view>
			<view class="main-item">
				<text>手机:</text>
				<input type="number" maxlength="11" v-model="phone" />
			</view>
			<view class="main-item">
				<text>年龄:</text>
				<input maxlength="2" v-model="age" type="number" />
			</view>
			<view class="main-item">
				<text>地址:</text>
				<input type="text" maxlength="20" v-model="address" />
			</view>
			<view class="main-item">
				<text>身份证号:</text>
				<input type="text" maxlength="18" οninput="value= value.replace(/[^\d|xX]/g,'')" v-model="idCard" />
			</view>
			<view class="main-item">
				<text>单位名称:</text>
				<input type="text" maxlength="20" v-model="company" />
			</view>
			<view class="main-item">
				<text>技能证件:</text>
				<input type="text" maxlength="20" v-model="certificates"style="font-size: 24rpx;" placeholder="主要填自己参加过的技能培训或者其他证书"/>
			</view>
			<view class="main-item" style="justify-content: left;">
				<text style="margin: 0 0 0 20rpx;">技能(特长):</text>
				<textarea value="" placeholder="" maxlength="50" v-model="techology" />
			</view>
			<view class="main-item" style="justify-content: left;">
				<text style="margin: 0 0 0 20rpx;">备注:</text>
				<textarea value="" placeholder="" maxlength="50" v-model="remark" />
			</view>
			<button class="sure" @click="submit()">确定</button>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				baseUrl: 'http://weixiaokong.91xiaokong.com/jeecg-boot/',
				// baseUrl: 'http://192.168.3.30:8085/jeecg-boot/',
				address: "",
				age: null,
				company: "",
				groupId: '',
				createTime: "",
				id: "",
				idCard: "",
				openId: "ogiDYs4eDr9DA2pofZeYsFQygtt4",
				phone: "",
				remark: "",
				sex: "",
				techology: "",
				username: "",
				cityList: '',
				url: '',
				index: 0,
				nickname:"",
				headimgurl:"",
				groupName:'请选择',
				certificates:"",
				redInput:0
			}
		},
		onLoad() {
			_this = this;
			let openid = uni.getStorageSync('openid')
			if (openid) {
				_this.openId = openid
			}
			// 城市列表
			console.log("111");
			uni.request({
				url: _this.baseUrl + "api/rescue/queryGroup",
				data: {
					openid: _this.openId
				},
				success(res) {
					_this.cityList = res.data.result;
					if(!openid){
						_this.groupId = res.data.result[0].id
					}else{
						// 用户回显
						uni.request({
							url: _this.baseUrl + "api/rescue/queryByOpenid",
							data: {
								openid: _this.openId
							},
							success(res) {
								console.log(res);
								if (res.data.code == 200) {
									_this.address = res.data.result.address
									_this.age = res.data.result.age
									_this.company = res.data.result.company
									_this.idCard = res.data.result.idCard
									_this.phone = res.data.result.phone
									_this.remark = res.data.result.remark
									_this.sex = res.data.result.sex
									_this.techology = res.data.result.techology
									_this.username = res.data.result.username
									_this.groupId = res.data.result.groupId
									_this.id = res.data.result.id
									_this.certificates = res.data.result.certificates
									console.log(document.getElementById('addRequestState').options.length)
									let select = document.getElementById('addRequestState');
									for(let i = 0;i < select.options.length;i++){
										if(select[i].value == _this.groupId){
											select.options[i].selected=true;
										}
									}
								}
							},
							fail(err) {
								console.log(err);
							}
						});
					}
				},
				fail(err) {
					console.log(err);
				}
			})
			
			_this.getopenId();
		},
		onShow() {
			
		},
		onReady() {

		},
		methods: {
			// 中文校验
			onKeyYHKNameInput: function(event){
					
							var value = event.detail.value;
									
							if(!value || value == " "){
								return ""
							}
						//匹配汉字的正则表达式
							const rule = /[^\u4E00-\u9FA5]/g;//如果你们需要字母或者数字，就改这儿！
							_this.$nextTick(function () {
								// _this.redInput = 1
							_this.username = value.replace(rule,'');
							})
						},
	
			// 返回按钮
			backBtn() {
				uni.navigateBack({
					delta: 1
				})
			},
			radioChange(e) {
				_this.sex = e.detail.value;
			},
			cityChange(e) {
				// console.log(_this.$refs.addRequestState.value);
				_this.groupId = _this.$refs.addRequestState.value;
			},
			submit() {
				/* 验证手机号是否正确 */
				// var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				// if(!reg_tel.test(_this.phone)){
				// 	uni.showToast({
				// 		title: "请认真填写手机号",
				// 		icon: "error"
				// 	});  
				// 	return false; 
				// } 
				let openid = uni.getStorageSync('openid')
				uni.request({
					url: _this.baseUrl + "api/rescue/add",
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: {
						address: _this.address,
						age: _this.age,
						company: _this.company,
						idCard: _this.idCard,
						phone: _this.phone,
						remark: _this.remark,
						sex: _this.sex,
						techology: _this.techology,
						username: _this.username,
						groupId: _this.groupId,
						openid: _this.openId,
						id: _this.id,
						certificates: _this.certificates
						
					},
					success(res) {
						console.log(res);
						if (res.data.code == 500) {
							alert(res.data.message)
						}
						if(res.data.code == 200){
							if(openid){
								alert('修改成功')
								uni.navigateTo({
									url:'./mine'
								})
							}else{
								alert('添加成功')
								uni.navigateTo({
									url:'./mine'
								})
							}
							
						}
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			// 获取openid
			getopenId() {
				let url = window.location.href;
				_this.url = url;
				let url_1 = url.split('?');
				if (url_1.length > 1) {
					let url_2 = url_1[1].split('&')
					url_2.forEach(function(e) {
						if (e.indexOf('openid') > -1) {
							_this.openId = e.split('=')[1];
							uni.setStorage({
								key: 'openid',
								data: _this.openId,
								success: function() {
									console.log('success');
								}
							});
						}
						if (e.indexOf('nickname') > -1) {
							_this.nickname = e.split('=')[1];
							uni.setStorage({
								key: 'nickname',
								data: _this.nickname,
								success: function() {
									console.log('success');
								}
							});
						}
						if (e.indexOf('headimgurl') > -1) {
							_this.headimgurl = e.split('=')[1];
							uni.setStorage({
								key: 'headimgurl',
								data: _this.headimgurl,
								success: function() {
									console.log('success');
								}
							});
						}
					})
				}
			},
		},
	}
</script>

<style>
	.mine-info {

		padding-top: 100rpx;
	}

	.top-nav {
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		padding: 0 5%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		z-index: 1000;
	}

	.main {
		width: 95%;
		background-color: #FFFFFF;
		height: 1400rpx;
		border-radius: 40rpx;
		/* width: 98%; */
		margin: auto;
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
	}

	.main-item {
		display: flex;
		justify-content: space-around;
		line-height: 100rpx;
		flex-wrap: wrap;
	}

	.main-item text {
		margin: auto;
	}

	.main-item input,.main-item .select {
		width: 70%;
		height: 60rpx;
		line-height: 60rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 30rpx;
		padding: 0 20rpx;
		margin: auto;
	}

	.main-item textarea {
		width: 100%;
		height: 180rpx;
		line-height: 200rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 30rpx;
		padding: 0 20rpx;
		margin: auto;
	}

	.sure {
		width: 80%;
		height: 80rpx;
		margin: 50rpx auto;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #b30002;
		color: #FFFFFF;
	}

	.radio {
		display: flex;
		width: 70%;
		margin: auto;
		padding: 0 20rpx;
	}

	.radio label {
		display: flex;
		margin-right: 20rpx;
	}
</style>
